<template>
	<view class="zh-order-purchase-detail">
		<view class="section">
			<view class="top display-flex justify-between align-center">
				<view class="font-302D2D font-28 font-bold">
					<text class="name">订单号</text>
					<text>{{ purchaseData.detail.billno}}</text>
				</view>
				<view class="display-flex align-center font-28">
				<!-- 	<image src="@/static/icons/audit_icon.png"  class="audit-icon"/> -->
					<text class="font-FF661B ml-10" v-if="purchaseData.detail.status === OrderStatus.waitSure">待确认</text>
					<text class="font-FF661B ml-10" v-if="purchaseData.detail.status === OrderStatus.assert">待付款</text>
					<text class="font-FF661B ml-10" v-if="purchaseData.detail.status === OrderStatus.paid">待收款</text>
					<text class="font-FF661B ml-10" v-if="purchaseData.detail.status === OrderStatus.paymented">已收款</text>
					<text class="font-1769ff ml-10" v-if="purchaseData.detail.status === OrderStatus.done">交易完成</text>
				</view>
			</view>
			<view class="content">
				<view class="item display-flex font-26">
					<view class="name">
						<text class="font-bold">订单信息</text>
					</view>
					<view>
						<view>
							<text class="font-999">订单类型：</text>
							<text v-if="purchaseData.detail.ordertype ===  Ordertype.matchDeal">撮合交易</text>
						</view>
						<view class="mt-15">
							<text class="font-999">订单来源：</text>
							<text v-if="purchaseData.detail.ordersource ===  Ordersource.shop">商城</text>
							<text v-if="purchaseData.detail.ordersource ===  Ordersource.platform">后台</text>
						</view>
						<view class="mt-15">
							<text class="font-999">创建时间：</text>
							<text>{{ purchaseData.detail.createtime }}</text>
						</view>
					</view>
				</view>
				<view class="item display-flex font-26">
					<view class="name">
						<text class="font-bold">买家信息</text>
					</view>
					<view>
						<view>
							<text class="font-999">买家名称：</text>
							<text>{{ purchaseData.detail.buyCompanyName }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999">联系人：</text>
							<text>{{ purchaseData.detail.buyNickName }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999">联系电话：</text>
							<text>{{ purchaseData.detail.buyPhonenumber }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999">开票抬头：</text>
							<text>{{ purchaseData.detail.invoiceTitle }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999">提货方式：</text>
							<text v-if="purchaseData.detail.pickingmethod === Pickingmethod.buyPickUp">自提</text>
							<text v-if="purchaseData.detail.pickingmethod === Pickingmethod.sellDelivery">卖家发货</text>
						</view>
						<view class="mt-15">
							<text class="font-999">备注：</text>
							<text>{{ purchaseData.detail.buyremark || '-'  }}</text>
						</view>
					</view>
				</view>
				<view class="item display-flex font-26">
					<view class="name">
						<text class="font-bold">卖家信息</text>
					</view>
					<view>
						<view>
							<text class="font-999">卖家名称：</text>
							<text>{{ purchaseData.detail.sellCompanyName }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999">交易员：</text>
							<text>{{ purchaseData.detail.sellNickName }}</text>
						</view>
						<view class="mt-15 display-flex justify-start align-center">
							<text class="font-999">联系电话：</text>
							<text class="font-1769ff text-decoration" v-if="purchaseData.detail.sellPhonenumber">{{ purchaseData.detail.sellPhonenumber }}</text>
							<view class="ml-10" v-if="purchaseData.detail.sellPhonenumber" @click="handleLink(purchaseData.detail.sellPhonenumber)">
								<button class="link-btn">
									<image src="@/static/icons/tel_icon.png" class="tel-icon"/>
									<text>联系</text>
								</button>
							</view>
						</view>
						<view class="mt-15">
							<text class="font-999">备注：</text>
							<text>{{ purchaseData.detail.sellremark || '-' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabs">
			<u-tabs :titles="['货物', '费用', '配送', '进度','附件']" @click="clickTab"></u-tabs>
		</view>
		<view class="goods" v-if="tabsIndex == 0">
			<view class="top-item" v-for="topItem in purchaseData.detail.dtList" :key="topItem.spckmc">
				<view class="top display-flex justify-between align-center">
					<view class="display-flex align-center">
						<text class="title">中恒纺织交易市场（广东）有限公司</text>
					</view>
					<text class="stock">{{ topItem.spckmc }}</text>
				</view>
				<view class="bottom">
					<view class="item display-flex justify-between" v-for="item in topItem.list" :key="item.id">
						<view class="thumbnail">
							<template  v-for="(file, fileIndex) in item.wpggAFileDataList" :key="file.id">
								<image :src="util.previewImg(file.url)" v-if="fileIndex == 0" mode="aspectFit" /> 
							</template>
						</view>
						<view class="center flex">
							<view class="font-24">{{ item.spzs }}</view>
							<view class="content mt-20">
								<view class="font-22 font-666">纱支：{{ item.wpggA }}</view>
								<view class="font-22 font-666">品牌：{{ item.spcd }}</view>
								<view class="font-22 font-666">价格：¥{{ item.price }}/吨</view>
							</view>
						</view>
						<view class="right">
							<view class="font-302D2D font-24">{{ item.weight }}吨</view>
							<view class="font-302D2D font-24 font-bold">¥{{ item.subtotal }}</view>
						</view>
					</view>
				</view>
				<view class="mt-20">
					<cell-item title="货物重量" :value="topItem.weight + '吨'" :arrow="false"></cell-item>
					<cell-item title="货物金额" :value="'¥' + topItem.subtotal" :arrow="false"></cell-item>
					<cell-item :title="'手续费' + orderFee + '元/吨'" :value="'¥' + topItem.commission" :border="false" :arrow="false"></cell-item>
				</view>
			</view>
			<view class="display-flex justify-end sum-list font-bold">
				<text>共</text>
				<text class="font-FF661B">{{ getSumList.record }}</text>
				<text>件商品，合计：</text>
				<text class="font-FF661B">¥{{ getSumList.total }}</text>
			</view>
			<view class="text-center mt-30 font-999 text-decoration font-28"  @click="discard" v-if="purchaseData.detail.status < OrderStatus.assert">
				<text>作废</text>
			</view>
		</view>
		<view class="fees" v-if="tabsIndex == 1 && purchaseData.detail.costList && purchaseData.detail.costList.length > 0">
			<view class="content">
				<view class="display-flex item">
					<text class="left">货物重量</text>
					<text class="right">{{ getFeeData.weight }}</text>
				</view>
				<view class="display-flex item">
					<text class="left">货物合计(元)</text>
					<text class="right">{{ getFeeData.subtotal }}</text>
				</view>
				<view class="display-flex item">
					<text class="left">手续费({{ orderFee }}元/吨)</text>
					<text class="right">{{ getFeeData.commission }}</text>
				</view>
			</view>
			<view class="display-flex justify-between mt-60">
				<view class="flex text-decoration font-1769ff font-24" @click="payRecord" 
					v-if="purchaseData.detail.status === OrderStatus.assert
					|| purchaseData.detail.status === OrderStatus.paid
					|| purchaseData.detail.status === OrderStatus.paymented
					|| purchaseData.detail.status === OrderStatus.done">
					<text>付款记录</text>
				</view>
				<view e-else></view>
				<view class="font-bold font-28">
					<view>
						<text>订单应付：</text>
						<text class="font-FF661B">¥{{ getPayData.payable }}</text>
					</view>
					<view>
						<text>已付：</text>
						<text class="font-FF661B">¥{{ getPayData.paid }}</text>
					</view>
					<view>
						<text>待付：</text>
						<text class="font-FF661B">¥{{ getPayData.waitPay }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="delivery"  v-if="tabsIndex == 2">
			<view v-if="purchaseData.detail.pickingmethod == Pickingmethod.sellDelivery">
				<view class="font-26">
					<text class="font-999">提货方式：</text>
					<text class="font-302D2D ml-20">发货</text>
				</view>
				<view class="font-26 mt-10 mt-10">
					<text class="font-999">收 件 人：</text>
					<text class="font-302D2D ml-30">{{ purchaseData.detail.contacts}}</text>
				</view>
				<view class="font-26 mt-10">
					<text class="font-999">联系电话：</text>
					<text class="font-302D2D ml-20">{{ purchaseData.detail.contactmethod}}</text>
				</view>
				<view class="font-26 mt-10">
					<text class="font-999">收货地址：</text>
					<text class="font-302D2D ml-20">{{ purchaseData.detail.province + purchaseData.detail.city + purchaseData.detail.area + purchaseData.detail.address}}</text>
				</view>
			</view>
			<view v-if="purchaseData.detail.pickingmethod == Pickingmethod.buyPickUp">
				<view class="font-26">
					<text class="font-999">提货方式：</text>
					<text class="font-302D2D ml-20">自提</text>
				</view>
			</view>
		</view>
		<view class="progress"  v-if="tabsIndex == 3">
			<view class="display-flex">
				<view class="flow display-flex flex-direction-column align-center">
					<!-- <view class="circle active"></view> -->
					<template v-for="(item, index) in orderLogData.list" :key="index">
						<view class="circle" :class="{'active':index === orderLogData.list.length - 1}"></view>
						<view class="line" v-if="index !== orderLogData.list.length - 1"></view>
					</template>
				<!-- 	<view :class="[index%2 === 1?'circle':'line', index === orderLogData.list.length - 1?'active':'']" ></view> -->
				</view>
				<view class="flex">
					<view class="mt-30" v-for="item in orderLogData.list" :key="item.id">
						<view class="display-flex align-center">
							<text class="font-24 font-bold">{{ item.nickname }}</text>
							<text class="font-22 ml-10">{{ item.shopName }}</text>
							<text class="font-24 font-bold ml-30" v-if="item.status === OrderStatus.edit">创建订单</text>
							<text class="font-24 font-bold ml-30" v-if="item.status === OrderStatus.waitSure">创建订单 (待确认)</text>
							<text class="font-24 font-bold ml-30" v-if="item.status === OrderStatus.assert">确认订单 (待付款)</text>
							<text class="font-24 font-bold ml-30" v-if="item.status === OrderStatus.paid">确认订单付款 (待收款)</text>
							<text class="font-24 font-bold ml-30" v-if="item.status === OrderStatus.paymented">确认订单收款 (已收款)</text>
							<text class="font-24 font-bold ml-30" v-if="item.status === OrderStatus.done">确认订单交易完成 (交易完成)</text>
							<text class="font-24 font-bold ml-30" v-if="item.status === OrderStatus.discard">已作废</text>
						</view>
						<view class="mt-10">
							<text class="font-22">{{ item.createtime }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="files"  v-if="tabsIndex == 4">
			<view class="display-flex justify-between title font-22 font-999">
				<text class="width-250 ml-30">附件名称</text>
				<text class="flex">创建时间</text>
				<text class="width-100">操作</text>
			</view>
			<view class="content font-24">
				<view class="display-flex justify-between item" v-for="item in purchaseData.detail.fileList" :key="item.id">
					<text class="width-250 ml-30">{{ item.originalfilename }}</text>
					<text class="flex">2022-6-6  12:00:10</text>
					<text class="width-100 text-decoration font-1769ff">查看</text>
				</view>
			</view>
		</view>
		<view class="mt-60">
			<view v-if="purchaseData.detail.status === OrderStatus.assert && getPayData.waitPay > 0">
				<button class="app-primary-button" hover-class="app-primary-button-active" @click="payAdd">新增付款</button>
			</view>
			<view v-if="purchaseData.detail.status === OrderStatus.assert && getPayData.waitPay === 0">
				<button class="app-primary-button" hover-class="app-primary-button-active"  @click="payAddSure">确认付款</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed } from 'vue'
	import {onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { order, systemApi } from '@/api'
	import { util, tip } from '@/utils'
	import { Ordersource, Ordertype, OrderStatus, Pickingmethod, Settlementmode } from '@/enum/order'
	import { Digit } from '@/enum/digit'
	import { Businesstype } from '@/enum/order'
	
	const tabsIndex = ref(0)
	const orderFee:any = ref('')
	const purchaseData: any = reactive({
		query:{
			id:''
		},
		detail:{
			paymentInfoList:[]
		},
		setPurchaseOrderQuery: {
			id:'',
			status:''
		}
	})
	const payData: any = reactive({
		query: {
			id:''
		}
	})
	
	const orderLogData: any = reactive({
		query:{
			orderId:''
		},
		list:[]
	})
	
	onLoad((options:any) => {
		purchaseData.query.id = options.id
		purchaseData.setPurchaseOrderQuery.id = options.id
		payData.query.id = options.id
		orderLogData.query.orderId = options.id
		purchaseDetail()
		//getOrderFee()
		orderLog()
	})
	
	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	// const getOrderFee = () => {
	// 	systemApi.getConfigKey('order_handling_fee').then((res:any) => {
	// 		orderFee.value = res.msg
	// 	})
	// }
	
	const purchaseDetail = () => {
		order.getSaleOrderDetail(purchaseData.query).then((res:any) => {
			const data = res.data
			const dtList: any = data.dtList
			//获取手续费
			const costList: any = data.costList
			orderFee.value = 0
			costList.map((item:any) => {
				if(item.costname === '手续费') {
					return orderFee.value = item.price
				}
			})
			//数据重排
			const spckmcArr: Array<string> = []
			const dtListArr: Array<{spckmc:string, list:any}> = []
			for(let i in dtList) {
				if(!spckmcArr.includes(dtList[i].spckmc)) {
					spckmcArr.push(dtList[i].spckmc)
				}
			}
			for(let i in spckmcArr) {
				let obj: any = {spckmc:spckmcArr[i], list:[]}
				for(let j in dtList) {
					if(spckmcArr[i] == dtList[j].spckmc) {
						obj.list.push(dtList[j])
					}
				}
				dtListArr.push(obj)
			}
			data.dtList = dtListArr
			purchaseData.detail = data
		})
	}
	
	const orderLog = () => {
		order.getOrderLog(orderLogData.query).then((res:any) => {
			const data = res.data && res.data.reverse()
			orderLogData.list = data
		})
	}
	
	const getSumList = computed(() => {
		const dtList = purchaseData.detail.dtList
		let total = 0
		let len = 0
		for(let i in dtList) {
			let weight = 0
			let subtotal = 0
			let commission = 0
			const list = dtList[i].list
			for(let j in list) {
				weight = weight + list[j].weight
				subtotal = subtotal + list[j].subtotal
				len++
			}
			dtList[i].weight = parseFloat(weight.toFixed(Digit.weight)) 
			dtList[i].subtotal = parseFloat(subtotal.toFixed(Digit.amount))
			dtList[i].commission = orderFee.value?parseFloat((weight * Number(orderFee.value)).toFixed(Digit.amount)):0
			total = total + dtList[i].subtotal 
		}
		
		return {
			total:total,
			record:len
		}
	})
	
	const getFeeData = computed(() => {
		let weight = 0
		let subtotal = 0
		let commission = 0
		let payable = 0
		const costList = purchaseData.detail && purchaseData.detail.costList
		
		for(let i in costList) {
			if(costList[i].settlementmode == Settlementmode.nowSettle) {
				weight = weight + costList[i].weight
				subtotal = subtotal + costList[i].subtotal
			} else if(costList[i].settlementmode == Settlementmode.monthSettle) {
				commission = commission + costList[i].subtotal
			}
		}
		
		return {
			weight,
			subtotal,
			commission,
			payable,
		}
	})
	
	const getPayData = computed(() => {
		return payDataGet()
	})
	
	const payDataGet = () => {
		const paymentInfoList = purchaseData.detail.paymentInfoList
		const costList = purchaseData.detail && purchaseData.detail.costList
		let paid = 0
		let waitPay = 0
		let payable = 0
		for(let i in paymentInfoList) {
			paid = paid + paymentInfoList[i].subtotal
		}
		for(let i in costList) {
			if(costList[i].settlementmode == Settlementmode.nowSettle) {
				payable = payable + costList[i].subtotal	
			}
		}
		
		waitPay = parseFloat((payable - paid).toFixed(Digit.amount))
		return {
			payable,
			paid,
			waitPay,
		}
	}
	
	uni.$on('payAdd', (data:any) => {
		purchaseData.detail.paymentInfoList.push(data)
	})
	
	// const payList = () => {
	// 	order.getPayList(payData.query).then((res:any) => {
	// 		purchaseData.detail.paymentInfoList = res.data
	// 	})
	// }
	
	const clickTab = (index:number) => {
		tabsIndex.value = index
	}
	
	
	const setSaleOrder = (msg:string) => {
		order.setSaleOrderStatus(purchaseData.setPurchaseOrderQuery).then((res:any) => {
			tip.showToast(msg)
			uni.$emit('purchaseOrderUpdate',true)
			uni.navigateBack({delta:1})
		})
	}
	
	const discard = () => {
		purchaseData.setPurchaseOrderQuery.status = OrderStatus.discard
		setSaleOrder('成功作废该订单！')
	}
	
	const payAdd = () => {
		const info = util.setObjParams({
			orderid:purchaseData.detail.id,
			receivingcompany: purchaseData.detail.sellCompanyId,
			payingcompany:purchaseData.detail.buyCompanyId,
		})
		const params = util.paramsStr({
			info:info,
			payingCompanyName: purchaseData.detail.buyCompanyName,
			receivingCompanyName: purchaseData.detail.sellCompanyName,
			waitPay:payDataGet().waitPay
		})
		
		navigateTo('/pages/order/pay/add' + params)
	}
	
	const payAddSure = () => {
		purchaseData.setPurchaseOrderQuery.status = OrderStatus.paid
		setSaleOrder('付款成功')
	}
	
	const payRecord = () => {
		const params = util.paramsStr({
			type:Businesstype.purchase,
			status:purchaseData.detail.status,
			id:purchaseData.detail.id,
			waitPay:payDataGet().waitPay
		})
		navigateTo('/pages/order/pay/index' + params)
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
	const handleLink = (phone:string) => {
		util.telphone(phone)
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const refresh = () => {
		purchaseDetail()
		//getOrderFee()
		orderLog()
	}	
</script>

<style lang="scss" scoped>
	.zh-order-purchase-detail {
		padding-bottom:60rpx;
		.section {
			background-color: $uni-bg-card-color;
			padding:30rpx 30rpx 0;
			margin-top: 20rpx;
			.top {
				padding-bottom: 30rpx;
				.name {
					display:inline-block;
					width: 160rpx;
				}
				.audit-icon {
					width: 26rpx;
					height: 26rpx;
				}
			}
			.content {
				.item {
					padding:30rpx 0;
					border-top: 1rpx solid $uni-border-color;
					.name {
						width: 160rpx;
					}
					.link-btn {
						width: 101rpx;
						height: 36rpx;
						line-height: 36rpx;
						color:#fff;
						font-size: 22rpx;
						background-color: $uni-color-primary;
						border-radius: 18rpx;
						padding:0;
						text-align: center;
						.tel-icon {
							width: 18rpx;
							height: 18rpx;
							margin-right: 3rpx;
						}
					}
					
				}
			}
		}
		.tabs {
			margin-top: 20rpx;
		}
		.goods {
			margin-bottom: 20rpx;
			.top-item {
				padding:0rpx 30rpx;
				background-color: $uni-bg-card-color;
				.top {
					.title {
						font-size: $uni-font-size-30;
						color:$uni-text-color-light-black;
						margin-left: 20rpx;
						font-weight: bold;
					}
					.stock {
						font-size:$uni-font-size-sm;
						color:$uni-text-color-dark-grey;
						
					}
				}
				.bottom {
					.item {
						border-bottom: 1rpx solid $uni-border-color;
						padding: 40rpx 0;
						.thumbnail {
							width: 160rpx;
							height: 160rpx;
							background: #FFFFFF;
							border: 1rpx solid #EEEEEE;
							border-radius: 10rpx;
							text-align:center;
							image {
								width: 100%;
								height:100%;
							}
						}
						.center {
							margin-left:20rpx;
							.content {
								width: 260rpx;
								height: 85rpx;
								background: #EFF0F4;
								border-radius: 6rpx;
								padding:14rpx 17rpx;
							}
						}
					}
				}
			}	
		}
		.fees {
			background-color: $uni-bg-card-color;
			padding:30rpx;
			border-bottom:1rpx solid #E5E5E5;
			.content {
				border-top:1rpx solid #E5E5E5;
				.item {
					font-size: 28rpx;
					color:#7D7D7D;
					height:60rpx;
					line-height: 60rpx;
					border-bottom:1rpx solid #E5E5E5;
					border-left:1rpx solid #E5E5E5;
					border-right:1rpx solid #E5E5E5;
					.left {
						width: 260rpx;
						background-color: #F6F7FA;
						text-align:center;
					}
					.right {
						border-left:1rpx solid #E5E5E5;
						padding-left:40rpx;
					}
				}
			}
		}
		.delivery {
			padding:30rpx;
			background-color: $uni-bg-card-color;
		}
		.progress {
			background-color: $uni-bg-card-color;
			.flow {
				padding:45rpx 30rpx;
				.circle {
					width: 14rpx;
					height: 14rpx;
					box-sizing: border-box;
					background-color: #fff;
					border:1rpx solid $uni-color-primary;
					border-radius: 50%;
					position:relative;
					&.active {
						width:38rpx;
						height: 38rpx;
						background-color: #fff;
						border:11rpx solid $uni-color-primary;
					}
				}
				.line {
					background-color: $uni-color-primary;
					height:110rpx;
					width:1rpx;
				}
			}
		}
		.files {
			padding: 30rpx;
			background-color: $uni-bg-card-color;
			.title {
				height: 57rpx;
				line-height: 57rpx;
				background-color: #F6F6F6;
			}
			.width-250 {
				width: 250rpx;
			}
			.width-100 {
				width: 100rpx;	
			}
			.content{
				.item {
					padding:26rpx 0;
					border-bottom:1rpx solid #E5E5E5;
				}
			}
		}
		.sum-list {
			margin:30rpx;
			font-size:28rpx;
		}
	}
</style>
